import React from 'react'

class DeepChild extends React.Component {
  // 情况3：父组件更新，会自动触发子组件的更新
  componentDidUpdate() {
    console.log('我是DeepChild的componentDidUpdate')
  }
  render() {
    return <div>我是子组件DeepChild</div>
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      num: 0,
    }
  }

  // 触发更新的三种情况：
  componentDidUpdate() {
    console.log('我是Child的componentDidUpdate')
  }

  handleClick = () => {
    // 情况1：setState
    // this.setState({
    //   num: this.state.num + 1,
    // })
    // 情况2：forceUpdate 强制更新
    this.forceUpdate()
  }
  render() {
    return (
      <>
        <h2>{this.state.num}</h2>
        <button onClick={this.handleClick}>点击我+1</button>
        <DeepChild></DeepChild>
      </>
    )
  }
}
export default class App extends React.Component {
  render() {
    return (
      <>
        <Child></Child>
      </>
    )
  }
}
